<template>
  <div class="settings-content">
    <div class="content-header">
      <h2>通用</h2>
      <p class="content-description">系统外观和行为设置</p>
    </div>

    <div class="setting-group">
      <!-- 外观 -->
      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">外观</label>
          <p class="setting-hint">选择浅色或深色外观，或自动根据时间切换</p>
        </div>
        <div class="setting-control">
          <button
            class="option-btn"
            :class="{ active: desktopStore.appearance === 'light' }"
            @click="desktopStore.setAppearance('light')"
          >
            ☀️ 浅色
          </button>
          <button
            class="option-btn"
            :class="{ active: desktopStore.appearance === 'dark' }"
            @click="desktopStore.setAppearance('dark')"
          >
            🌙 深色
          </button>
          <button
            class="option-btn"
            :class="{ active: desktopStore.appearance === 'auto' }"
            @click="desktopStore.setAppearance('auto')"
          >
            🔄 自动
          </button>
        </div>
      </div>

      <!-- 强调色 -->
      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">强调色</label>
          <p class="setting-hint">选择按钮、选中文本等元素的颜色</p>
        </div>
        <div class="accent-colors">
          <div
            v-for="accent in accentColors"
            :key="accent.id"
            class="accent-item"
            :class="{ selected: desktopStore.accentColor === accent.color }"
            :style="{ background: accent.color }"
            @click="desktopStore.setAccentColor(accent.color)"
            :title="accent.name"
          >
            <div class="accent-check" v-if="desktopStore.accentColor === accent.color">✓</div>
          </div>
        </div>
      </div>

      <!-- 侧边栏图标大小 -->
      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">侧边栏图标大小</label>
          <p class="setting-hint">调整 Finder 和其他应用侧边栏中的图标大小</p>
        </div>
        <div class="setting-control">
          <button
            class="option-btn"
            :class="{ active: desktopStore.sidebarIconSize === 'small' }"
            @click="desktopStore.setSidebarIconSize('small')"
          >
            小
          </button>
          <button
            class="option-btn"
            :class="{ active: desktopStore.sidebarIconSize === 'medium' }"
            @click="desktopStore.setSidebarIconSize('medium')"
          >
            中
          </button>
          <button
            class="option-btn"
            :class="{ active: desktopStore.sidebarIconSize === 'large' }"
            @click="desktopStore.setSidebarIconSize('large')"
          >
            大
          </button>
        </div>
      </div>

      <!-- 滚动条显示 -->
      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">显示滚动条</label>
          <p class="setting-hint">选择滚动条的显示时机</p>
        </div>
        <div class="setting-control">
          <button
            class="option-btn"
            :class="{ active: desktopStore.showScrollBars === 'always' }"
            @click="desktopStore.setShowScrollBars('always')"
          >
            始终
          </button>
          <button
            class="option-btn"
            :class="{ active: desktopStore.showScrollBars === 'whenScrolling' }"
            @click="desktopStore.setShowScrollBars('whenScrolling')"
          >
            滚动时
          </button>
          <button
            class="option-btn"
            :class="{ active: desktopStore.showScrollBars === 'never' }"
            @click="desktopStore.setShowScrollBars('never')"
          >
            从不
          </button>
        </div>
      </div>

      <!-- 自动隐藏菜单栏 -->
      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">自动隐藏菜单栏</label>
          <p class="setting-hint">菜单栏将在不使用时自动隐藏</p>
        </div>
        <label class="toggle-switch">
          <input
            type="checkbox"
            :checked="desktopStore.autoHideMenuBar"
            @change="desktopStore.setAutoHideMenuBar(!desktopStore.autoHideMenuBar)"
          />
          <span class="toggle-slider"></span>
        </label>
      </div>

      <!-- 自动隐藏 Dock -->
      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">自动隐藏和显示 Dock</label>
          <p class="setting-hint">Dock 将在不使用时自动隐藏</p>
        </div>
        <label class="toggle-switch">
          <input
            type="checkbox"
            :checked="desktopStore.autoHideDock"
            @change="desktopStore.setAutoHideDock(!desktopStore.autoHideDock)"
          />
          <span class="toggle-slider"></span>
        </label>
      </div>

      <!-- 减弱动态效果 -->
      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">减弱动态效果</label>
          <p class="setting-hint">减少界面中的动画效果</p>
        </div>
        <label class="toggle-switch">
          <input
            type="checkbox"
            :checked="desktopStore.reduceMotion"
            @change="desktopStore.setReduceMotion(!desktopStore.reduceMotion)"
          />
          <span class="toggle-slider"></span>
        </label>
      </div>

      <!-- 降低透明度 -->
      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">降低透明度</label>
          <p class="setting-hint">减少某些背景的透明度以提高对比度</p>
        </div>
        <label class="toggle-switch">
          <input
            type="checkbox"
            :checked="desktopStore.reduceTransparency"
            @change="desktopStore.setReduceTransparency(!desktopStore.reduceTransparency)"
          />
          <span class="toggle-slider"></span>
        </label>
      </div>
    </div>

    <div class="setting-group" v-if="desktopStore.isLoggedIn">
      <h3 class="setting-group-title">安全</h3>
      
      <!-- 锁屏密码 -->
      <div class="setting-item">
        <div class="setting-info">
          <label class="setting-label">锁屏密码</label>
          <p class="setting-hint">
            {{ desktopStore.lockScreenPassword ? '已设置锁屏密码' : '未设置锁屏密码，点击设置' }}
          </p>
        </div>
        <button class="action-btn" @click="showPasswordDialog = true">
          {{ desktopStore.lockScreenPassword ? '修改密码' : '设置密码' }}
        </button>
      </div>
    </div>
  </div>

  <!-- 设置锁屏密码弹窗 -->
  <SetLockPasswordDialog
    :show="showPasswordDialog"
    @confirm="handleSetPassword"
    @cancel="showPasswordDialog = false"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDesktopStore } from '../../../stores/desktop'
import SetLockPasswordDialog from '../../common/SetLockPasswordDialog.vue'

const desktopStore = useDesktopStore()
const showPasswordDialog = ref(false)

function handleSetPassword(password: string) {
  desktopStore.setLockScreenPassword(password)
  showPasswordDialog.value = false
}

const accentColors = [
  { id: 1, name: '蓝色', color: '#007aff' },
  { id: 2, name: '紫色', color: '#5856d6' },
  { id: 3, name: '粉色', color: '#ff2d55' },
  { id: 4, name: '橙色', color: '#ff9500' },
  { id: 5, name: '黄色', color: '#ffcc00' },
  { id: 6, name: '绿色', color: '#34c759' },
  { id: 7, name: '红色', color: '#ff3b30' },
  { id: 8, name: '灰色', color: '#8e8e93' },
]
</script>

